<template>
	<view>
		<view class="box">
			<view class="">
				<view class="" v-if="isend==false">
					<u-count-down @end="ends" :timestamp="timestamp" :show-days="false" :show-seconds="false" separator="zh" separator-color="#ffffff"  bg-color="#EA5344" color="#ffffff" font-size="42" separator-size="42"></u-count-down>
					<text style="font-size: 40rpx;" >后开场</text>
				</view>
				
				<!-- <text style="font-size: 40rpx;font-weight: 500;" v-if="isend==false">{{infos.showTime | DateDifference}}后开场</text> -->
				<text style="font-size: 40rpx;font-weight: 500;" v-if="isend==true">已放映</text>
			</view>
			<view style="margin-top: 15rpx;">
				<text style="color: rgba(255,255,255,0.7);">凭二维码取票更方便，取票码不再以短信形式发送</text>
			</view>
			<view class="ticketbox">
				<u-row gutter="16">
					<u-col span="9">
						<view style="margin: 20rpx;">
							<text style="font-size: 40rpx;font-weight: 600;color: rgba(0,0,0,0.7);" :decode="true">{{infos.filmName}}</text> 
							<text style="font-size: 40rpx;font-weight: 600;color: rgba(0,0,0,0.7);margin-left: 15rpx;" :decode="true"> {{infos.count}}张</text>
							<!-- <u-tag :text="infos.count+'张'" shape="square" type="error" size="mini" style="margin-left: 15rpx;" /> -->
						</view>
						<view style="margin-top: 30rpx;margin-left: 20rpx;">
							<text style="font-size: 26rpx;color: #434343;font-weight: 500;">{{infos.showTime | formatDate2(infos.duration)}}</text>
						</view>
						<view style="margin-top: 10rpx;margin-left: 20rpx;">
							<text style="font-size: 26rpx;color: #434343;font-weight: 500;">{{infos.cinemaName}}</text>
						</view>
						<view style="margin-top: 10rpx;margin-left: 20rpx;">
							<text style="font-size: 26rpx;color: #9a9a9a;">{{infos.hallName}} {{infos.selectSeat | formatInfo}}</text>
						</view>
					</u-col>
					<u-col span="3" style="">
						<image :src="infos.filmImage" mode="aspectFit"
							style="width: 160rpx;height: 220rpx;border-radius: 10rpx;float: right;margin-right: 20rpx;margin-top: 20rpx;">
						</image>
					</u-col>

				</u-row>
				<view style="display: flex;width: 100%;height: 40rpx;margin-top: 30rpx;">
					<view
						style="flex-shrink: 0;width: 30rpx;height:30rpx;background-color: #F6F6F6;border-radius: 50%;margin-left: -15rpx;">
				
					</view>
					<view style="width: 630rpx;flex-shrink: 0;">
						<u-line border-style="dashed" margin="15rpx 20rpx" color="#888888"/>
					</view>
					<view
						style="flex-shrink: 0;width: 30rpx;height:30rpx;background-color: #F6F6F6;border-radius: 50%;margin-left:30rpx;">
				
					</view>
				</view>
				<view>
					<view style="padding: 30rpx;text-align: left;margin-top: -30rpx;">
						<text style="font-size: 36rpx;color: #000000;font-weight: 500;">取票码</text>
					</view>
					<view style="display: block;margin-left:200rpx;width: 270rpx;height: 270rpx;border-radius: 8rpx;">
						<uqrcode ref="uqrcode"></uqrcode>
					</view>

				</view>
				<u-gap height="60" bg-color="#fcfcfc"></u-gap>
				<view
					style="margin:auto;width: 90%;height: 100rpx;background-color: #fcfcfc;border-radius: 90rpx;padding: 10rpx;" v-if="code1 !=''">
					<!-- <view>
						<text style="color: RGBA(168, 176, 181, 1);">取票号: </text>
						<text style="color: RGBA(0, 0, 0, 1);"> 9908 1300 4283 20</text>
					</view> -->
					<view class="">
						<text style="color: rgba(102, 102, 102, 1.0);font-size: 30rpx;">取票号：{{code}}</text>
					</view>
					<view class="" >
						<text style="color: rgba(102, 102, 102, 1.0);font-size: 30rpx;">验证码：{{code1}}</text>
					</view>

				</view>
				<view
					style="margin:auto;width: 90%;height: 100rpx;background-color:#fcfcfc;border-radius: 90rpx;padding: 30rpx;" v-if="code1 ===''">
					<!-- <view>
						<text style="color: RGBA(168, 176, 181, 1);">取票号: </text>
						<text style="color: RGBA(0, 0, 0, 1);"> 9908 1300 4283 20</text>
					</view> -->
					<view class="">
						<text style="color: rgba(102, 102, 102, 1.0);font-size: 30rpx;">取票号：{{code}}</text>
					</view>
					
				
				</view>
				<view style="padding: 30rpx;">
					<u-line border-style="dashed" color="#888888" />
				</view>
				<view style="padding: 0rpx;">
					<u-cell-group style="background-color: #fcfcfc;" :border="false">
						<u-cell-item :title="cinemainfo.name" :label="cinemainfo.address" bg-color="#fcfcfc"
							:border-bottom="false" :arrow="false"
							:title-style="{'color':'#414141','font-size':'34rpx','font-weight':'500'}" :label-style="{'font-size':'30rpx'}" @click="gocinema">
							<!-- <u-icon slot="right-icon" size="60" name="phone-fill" color="RGBA(203, 208, 211, 1)">
							</u-icon> -->
						</u-cell-item>

					</u-cell-group>
				</view>
				<view style="padding: 30rpx;">
					<u-line border-style="dashed" color="#888888" />
				</view>
				<view style="padding: 30rpx;height:80rpx;">
					<view style="float: left;">
						<text style="color: #000000;font-size: 32rpx;font-weight: 500;">实付金额</text>
					</view>
					<view style="float: right;">
						<text style="color: #000000;font-size: 32rpx;font-weight: 500;">¥{{infos.price}}</text>
					</view>
				</view>
				<view style="padding: 30rpx;height:60rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">总价</text>
					</view>
					<view style="float: right;">
						<text
							style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">¥{{infos.countPrice}}</text>
					</view>
				</view>
				<!-- <view style="padding: 30rpx;height:60rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 32rpx;font-weight: 500;">平台立减</text>
					</view>
					<view style="float: right;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 32rpx;font-weight: 500;">¥100.00</text>
					</view>
				</view> -->
				<view style="padding: 30rpx;height:90rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size:28rpx;font-weight: 500;">红包</text>
					</view>
					<view style="float: right;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">¥0.00</text>
					</view>
				</view>
				<view style="padding: 30rpx;">
					<u-line border-style="dashed" color="#888888" />
				</view>
				<view style="padding: 30rpx;height:80rpx;">
					<view style="float: left;">
						<text style="color: #000000;font-size: 32rpx;font-weight: 500;">订单信息</text>
					</view>

				</view>
				<view style="padding: 30rpx;height:60rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">订单号</text>
					</view>
					<view style="float: right;">
						<text
							style="color: RGBA(181, 188, 192, 1);font-size: 20rpx;font-weight: 500;">{{infos.tradeNum}}</text>
					</view>
				</view>
				<view style="padding: 30rpx;height:60rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">购买时间</text>
					</view>
					<view style="float: right;">
						<text
							style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">{{infos.expireDate | formatDate1}}</text>
					</view>
				</view>
				<view style="padding: 30rpx;height:110rpx;">
					<view style="float: left;">
						<text style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">手机号码</text>
					</view>
					<view style="float: right;">
						<text
							style="color: RGBA(181, 188, 192, 1);font-size: 28rpx;font-weight: 500;">{{infos.mobile}}</text>
					</view>
				</view>

			</view>
			<u-gap height="50" bg-color="#F6F6F6"></u-gap>
		</view>

	</view>
</template>

<script>
	import Config from '../../common/config.js';
	export default {
		data() {
			return {
				timestamp:0,
				isend:false,
				cinemainfo:{
					'name':'',
					'address':'',
					'cinemaId':'',
					'coord':''
				},
				infos: {},
				dftime: "",
				code:"",
				code1:""
				
			}
		},
		onReady() {
			this.$refs
				.uqrcode
				.make({
					size: 150,
					text: this.infos.ticketQrcode,
					backgroundColor: '#fcfcfc',
					margin: 0
				})
				.then(res => {
					// 返回的res与uni.canvasToTempFilePath返回一致
					
				})
		},
		onLoad() {
			
			console.log(uni.getStorageSync('ticketinfo'))
			this.infos =uni.getStorageSync('ticketinfo')
			if(this.infos.ticketQrcode.indexOf("|")>0){
				let codes = this.infos.ticketQrcode.split("|")
				this.code = codes[0]
				this.code1 = codes[1]
			}else{
				this.code = this.infos.ticketQrcode
				this.code1 = ""
			}
			var stime = Date.parse(new Date());
			var usedTime = Date.parse(new Date(this.infos.showTime))- stime; //两个时间戳相差的毫秒数
			console.log(usedTime,Date.parse(new Date(this.infos.showTime)),stime)
			this.timestamp = usedTime/1000
			if(usedTime <= 0){
				this.isend =true
			}else{
				this.isend =false
			}
			this.getcinemainfo()
		},
		filters: {
			formatInfo: function(value) {
				let b = ''
				value = value+""
				var reg = new RegExp(":","g");
				if(value.indexOf(',') !=-1){
					let a = value.split(',')
					//g,表示全部替换。
					
					for (var i = 0; i < a.length; i++) {
						
						b = b + a[i].replace(reg,"排") + "座 "
					}
				}else{
					b = value.replace(reg,"排") + "座 "
				}
				
				return b
			},
			DateDifference: function(etime) {
				var stime = Date.parse(new Date());
				// var stime = new Date(timestamp).getTime();
				// var etime = new Date(completeTime).getTime();
				var usedTime = Date.parse(new Date(etime))- stime;//两个时间戳相差的毫秒数
				if(usedTime <=0){
					this.isend=true
				}
				var days = Math.floor(usedTime / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = usedTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000))+days*24;
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				var time = hours + "时" + minutes + "分";
				//var time = days;
				
				return time;
			},
			formatDate2: function(value,timelong) {
				value = value+""
				value = value.replace(/-/g, "/");
				value = value+""
				timelong =timelong+""
				timelong = timelong.replace(/分钟/g,'')
				let hours = value.split(" ")[1].split(":")[0]
				let mins = value.split(" ")[1].split(":")[1]
				let startTime = hours + ":" + mins
				let tmphours = parseInt(timelong / 60) + parseInt(hours)
				let tmpmins = timelong % 60 + parseInt(mins)
				if (tmpmins >= 60) {
					tmphours++
					tmpmins = tmpmins - 60
				}
				if (tmphours >= 24) {
					tmphours = tmphours - 24
				}
				if (tmpmins < 10) {
					tmpmins = '0' + tmpmins
				}
				if (tmphours < 10) {
					tmphours = '0' + tmphours
				}
				let endTime = tmphours + ":" + tmpmins
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var nowT = new Date();
				var weekName = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
				if(nowT > date && date.toLocaleDateString() != nowT.toLocaleDateString()){
					var Y = date.getFullYear() + '年';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
					var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日 ';
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
					//var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
					return Y + M + D + h + m +"-"+endTime;
				}else{
					if(date.getDate() == nowT.getDate()){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "今天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+1){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "明天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+2){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return "后天 "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}else if(date.getDate() == nowT.getDate()+3){
						var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
						var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
						return weekName[date.getDay()]+" "+h + m+"-"+endTime
					}
				}
				
			},
			formatDate: function(value) {
				// value = value.toString().replace(/-/g, "/");
				let TIME = value+""
				TIME = TIME.replace(/-/g, "/");
				var date = new Date(TIME); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '年';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + '日 ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
			formatDate1: function(value) {
				// value = value.replace(/-/g, "/");
				let TIME = value+""
				
				TIME = TIME.replace(/-/g, "/");
				console.log(value,TIME)
				var date = new Date(TIME); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Y + M + D + h + m + s;
			},
		},
		methods: {
			ends(){
				this.isend =true
			},
			gocinema(){
				uni.navigateTo({
					url: '/pages/cinemaadds/cinemaadds?location=' + this.cinemainfo.coord + '&name=' + this.cinemainfo.name + "&id=" +
						this.cinemainfo.cinemaId
				});
			},
			getcinemainfo(){
				let that = this;
				
				uni.request({
					url:Config.ServerIP+"/movie/app/movie/cinemaInfo/"+that.infos.cinemaId,
					success: (res) => {
				
						if(res.data.code !=200){
							return
						}
						that.cinemainfo.cinemaId = res.data.data.cinemaId
						that.cinemainfo.name = res.data.data.name
						that.cinemainfo.address = res.data.data.address
						that.cinemainfo.coord = res.data.data.coord
						
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F6;
	}

	.ticketbox {
		margin: auto;
		width: 96%;
		/* height: 300rpx; */
		margin-top: 60rpx;

		background-color: #fcfcfc;
		border-radius: 20rpx;


	}

	.box {

		position: relative;
		width: 100%;
		height: 100px;
		text-align: center;
		color: #fff;
		background-color: #EA5344;
		padding: 20rpx;

	}

	.box:after {

		position: absolute;
		left: 0;
		right: 0;
		bottom: -40px;
		z-index: -1;
		content: ' ';
		height: 40px;
		width: 100%;
		border-radius: 0 0 50% 50%;
		background-color: #EA5344;
	}
</style>
